<script setup>
// 消耗提示组件
import baseModel from "@/components/baseModel/baseModel.vue";
import { computed, ref, reactive } from "vue";
import request from "@/common/utils/request";
import { useRouter } from "vue-router";
import { message } from "ant-design-vue";

const router = useRouter();
const props = defineProps({
  capacityToTalFormat: {
    type: Number,
    default: 0,
  },
});

const emit = defineEmits(["handleOk", 'openVipModel']);
const dialog = ref(null);

const visible = ref(false)

const showModal = () => {
  visible.value = true
  init();
};

const currentPrice = ref("");
const alias = ref("");
const unit = ref("");
const unitPrice = ref("");
const usenumber = ref("");
const placeholderText = ref("");
const unit_name = ref("");

const init = async () => {
  const res = await request.get("/work_ai", "/user/capacity/point", {
    number: "1",
  });

  unit_name.value = res.result.point.unit ? res.result.point.unit : "GB/年";
  currentPrice.value = res.result.currentPrice;
  alias.value = res.result.alias;
  unit.value = res.result.unit;
  unitPrice.value = res.result.unitPrice;
  placeholderText.value = "请输入不大于500的整数";
};

const closeModal = () => {
  visible.value = false
};

// 确认提交
const handleOk = async () => {
  if (usenumber.value == "") return message.error(placeholderText.value + "!");
  if (usenumber.value > 500) return message.error('请输入不大于500的整数');
  // if (usenumber.value > 500) return message.error(placeholderText.value + "!");
  if (!Number.isInteger(usenumber.value) || usenumber.value <= 0) {
    return message.error( "请输入正整数!");
  }

  const res = await request.put("/work_ai", "/user/capacity/point/exchange", {
    number: usenumber.value,
  });

  console.log(res,'充值空寂aN');
  

  if (res?.code == 3601) {
    emit('openVipModel')
    return
  }

  if (res.result) {
    message.success("操作成功!");
    usenumber.value = "";
  }
  // emit("handleOk");
  visible.value = false
};

const isVisibleChange = (val) => {
  console.log(val, "变化的值");
};

const isCloseChange = () => {};

defineExpose({
  showModal,
  closeModal,
});
</script>

<template>
  <div>
    <!-- <baseModel
      ref="dialog"
      :contentWidth="620"
      :zIndex="1004"
      @isClose="isCloseChange"
      @isVisible="isVisibleChange"
    > -->

    <a-modal
      v-model:visible="visible"
    >
      <template #title>
        <div>
          <span style="font-weight: 600">素材资源库容量</span>
        </div>
      </template>
      <!-- <template #content> -->
        <div class="content">
          <div class="content_top">
            <div style="font-size: 26px">{{ capacityToTalFormat }}</div>
            <div style="font-size: 16px; color: #999">当前最大容量</div>
          </div>
          <div class="content_one">
            当前剩余{{ alias }}: {{ currentPrice }}{{ unit }}
          </div>

          <div style="margin-top: 10px">
            <div class="text" style="margin-bottom: 5px">
              输入扩容数量
              <span style="color: #ea5959">
                (扩容1{{ unit_name }}, 需消耗{{ unitPrice }}{{ unit
                }}{{ alias }})
              </span>
            </div>
            <a-input-number
              :placeholder="placeholderText"
              addon-after="GB"
              :min="1"
              :step="1"
              v-model:value="usenumber"
              style="width: 100%"
            >
            </a-input-number>
          </div>
        </div>
      <!-- </template> -->
      <template #footer>
        <a-button key="back" @click="handleOk" type="primary">确定</a-button>
        <a-button key="back" @click="closeModal">取消</a-button>
      </template>
  </a-modal>

    <!-- </baseModel> -->
  </div>
</template>

<style lang="less" scoped>
.content {
  .content_top {
    width: 100%;
    text-align: center;
    margin-bottom: 10px;
  }
  .content_one {
    margin-bottom: 10px;
    text-align: center;
  }
}
</style>
